<template>
  <el-row v-if="userStore.applicationList.size">
    <el-col :span="10">
      <div class="apply-list">
        <el-scrollbar>
          <ul>
            <li
              v-for="[key, { userInfo, otherProto }] in userStore.applicationList"
              :key="key"
            >
              <div
                :class="{
                  'apply-list__item': true,
                  clearfix: true,
                  'apply-list__item--active': currentUserId === key,
                }"
                @click="handleToUser(userInfo, otherProto, key)"
              >
                <img class="apply-list__item--avatar" :src="userInfo.avatar" alt="" />
                <p class="apply-list__item--nickName">{{ userInfo.nickName }}</p>
                <span class="apply-list__item--time" v-time="otherProto.time"></span>
                <div class="apply-list__item--agree">
                  <el-button
                    :disabled="otherProto.isLoading || otherProto.isLoadingRefuse"
                    type="primary"
                    @click.stop="handleToAgree(userInfo, otherProto, key)"
                    :loading="otherProto.isLoading && !otherProto.isLoadingRefuse"
                    size="small"
                    ><template #loading><Loading /></template>同意</el-button
                  >
                </div>
              </div>
            </li>
          </ul></el-scrollbar
        >
      </div>
    </el-col>
    <el-col :span="14" class="apply-setup">
      <apply-mess
        v-model="show"
        :user="currentUser"
        :user-id="currentUserId"
      ></apply-mess>
      <div class="chat-logo flex" v-show="!show">
        <SvgIcon icon-class="logo" />
      </div>
    </el-col>
  </el-row>
  <div v-else class="apply-empty flex">
    <div style="text-align: center">
      <SvgIcon icon-class="emptyData" popper-class="apply-empty__icon" />
      <p class="apply-empty__desc">暂无申请数据</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useUserPinia } from "@/pinia/user";
import SvgIcon from "@/components/svgIcon/index.vue";
import applyMess from "./apply.vue";
import { ElMessage } from "element-plus";
import vTime from "@/directives/time";

const userStore = useUserPinia();

/**
 * 当前用户所选择的陌生朋友
 */
const currentUser = ref<{
  userInfo: Omit<User, "remark" | "userId">;
  otherProto: {
    applyLan: string;
    isLoading: boolean;
    time: number;
    isLoadingRefuse: boolean;
  };
}>({
  userInfo: {
    nickName: "",
    sex: "男",
    age: 0,
    address: "",
    avatar: "",
    signature: "",
  },
  otherProto: {
    applyLan: "",
    isLoading: false,
    time: 0,
    isLoadingRefuse: false,
  },
});
/**
 * 当前用户选择的userId
 */
const currentUserId = ref<string>("");
/**
 * 是否显示回复申请详情组件
 */
const show = ref<boolean>(false);
// 用户选择陌生朋友进行操作
const handleToUser = (
  userInfo: Omit<User, "remark" | "userId">,
  otherProto: {
    applyLan: string;
    isLoading: boolean;
    time: number;
    isLoadingRefuse: boolean;
  },
  key: string
) => {
  if (!show.value) show.value = true;
  currentUser.value.userInfo = userInfo;
  currentUser.value.otherProto = otherProto;
  currentUserId.value = key;
};

/**
 * 点击同意按钮发送请求
 */
const handleToAgree = (
  userInfo: Omit<User, "remark" | "userId">,
  otherProto: {
    applyLan: string;
    isLoading: boolean;
    time: number;
    isLoadingRefuse: boolean;
  },
  key: string
) => {
  otherProto.isLoading = true;
  userStore
    .isAgreeApply(
      {
        isAgree: true,
        selfId: userStore.user.userId,
        otherId: key,
        friendProperty: {
          remark: userInfo.nickName,
          group: "",
          disabledOtherLook: false,
          disabledSelfLook: false,
        },
      },
      { ...userInfo }
    )
    .then((code: number) => {
      otherProto.isLoading = false;
      if (code === 1) {
        if (show.value && key === currentUserId.value) {
          show.value = false;
          currentUserId.value = "";
        }
        ElMessage({
          type: "success",
          message: "添加成功",
          duration: 1500,
        });
      } else
        ElMessage({
          type: "error",
          message: "添加失败",
          duration: 1500,
        });
    })
    .catch(() => {
      otherProto.isLoading = false;
      ElMessage({
        type: "error",
        message: "添加失败",
        duration: 1500,
      });
    });
};
</script>

<style lang="scss" scoped>
.chat-logo {
  height: 100%;
  font-size: 70px;
  color: $logoColor;
}

.apply {
  &-empty {
    @include setWidHei(100%, 100%);

    &__icon {
      @include setWidHei(120px, 120px);
    }

    &__desc {
      color: #cdcdcd;
    }
  }

  &-list {
    height: 500px;
    border-right: 1px solid rgb(220, 220, 224);
    background-color: $bkColorSty;

    &__item {
      position: relative;
      padding: 20px 6% 20px 20px;
      transition: background-color 0.25s;
      cursor: pointer;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      overflow: hidden;

      &--active,
      &:hover {
        background-color: rgba(193, 191, 191, 0.114);
      }

      &--avatar {
        @include setWidHei(40px, 40px);
        object-fit: cover;
        margin-right: 10%;
        border-radius: 50%;
      }

      &--nickName {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
      }

      &--agree {
        text-align: right;
        width: calc(100% - 40px - 10% - 35%);
      }

      &--time {
        position: absolute;
        top: 7px;
        right: 6%;
        font-size: 12px;
        color: $dimFontCor;
      }
    }
  }

  &-setup {
    background-color: rgba(222, 219, 219, 0.114);
  }
}
</style>
